<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 设置默认地址 -->
<base href="/orderSystem/view/">
<style>
	body{
		
	}
	table{
		width: 800px;
		position: fixed;
		margin: 0 0;
		vertical-align: bottom;
    	border-bottom: 1px solid #ddd;
    	border-spacing: 10px;
    	border-collapse: separate;
    	left: 20%;
    	top: 25%;
    	text-align: center;
	}
	th,td{
		border: 3px solid #fff;
	}
	a{
		text-decoration: none;
		display: inline-block;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: red;
		color: #fff;
		font-weight: 900;
	}
</style>
<!-- vue框架： 视图的双向绑定 -->
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
<!--  axios: 进行异步请求（数据来源与网页脱离） -->
<script type="text/javascript" src="js/axios.js"></script>
</head>

<body >
	<h1>用户界面</h1>
	<table id="app">
		<thead>
			<tr>
				<th>id</th>
				<th>用户名</th>
				<th>密码</th>
				<th>年龄</th>
				<th>性别</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="u in users">
				<td>{{u.id}}</td>
				<td>{{u.username}}</td>
				<td>{{u.password}}</td>
				<td>{{u.age}}</td>
				<td>{{u.gender}}</td>
				<td>{{u.remake}}</td>
				<td>
					<a :href="'updateUser.html?id='+u.id">修改</a>
					<a href="javascript:void(0);"  v-on:click="delUser(u.id)">删除</a>
				</td>
			</tr>
			
		</tbody>
	</table>
	<script type="text/javascript">
		let vue = new Vue({
			el: '#app',
			data:{
				users: []
			},
			created(){
				//url: 表示异步请求地址
				axios.get('/orderSystem/selectUser.do').then(
					function(res_obj){
						//使用获取的数据来给vue对象中的users数据赋值
						vue.users = res_obj.data; 
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！！");
					}
				)
			},
			methods:{
				delUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/orderSystem/deleteUser.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.users = res_obj.data; 
							window.location.href="user.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			}
		});
	</script>
</body>
</html>